<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
</head>
<body>

   
    <!--头部-->
    <span id="header"></span>

    <div class="auth-main clearfix">
        <!--侧边导航-->
        <span id="nav"></span>

        <!--内容区域-->
        <div  class="main main-width-mid">
            <div class="ibox-title">
                <h5 style="color: #C2343A;">充值</h5>
            </div>

            <div class="ibox-title m-t m-select-btn">
                <h5>付款方式:</h5>
                <a class="active" href="javascript:;">公司网银</a>
                <a href="javascript:;">承兑汇票</a>
            </div>

            <div id="bankList" class="ibox-content m-bank-list">
                <div class="form-group">
                    <label class="m-radio-con">
                        <i class="iconfont icon-danxuanhongse"></i>
                        <input type="radio" name="bank" checked>
                        <img src="" />
                    </label>
                </div>
                <div class="form-group">
                    <label class="m-radio-con">
                        <i class="iconfont icon-danxuanhuise"></i>
                        <input type="radio" name="bank" >
                        <img src="" />
                    </label>
                </div>
                <div class="form-group">
                    <label class="m-radio-con">
                        <i class="iconfont icon-danxuanhuise"></i>
                        <input type="radio" name="bank" >
                        <img src="" />
                    </label>
                </div>

                <a class="other-bank pull-right" href="javascript:;">选择其他  &nbsp;&gt;</a>

                <div class="form-horizontal">
                    <div class="form-group" style="display: block">
                        <label class="col-xs-2 control-label">充值金额</label>
                        <div class="col-xs-8">
                            <input class="form-control" placeholder="请输入充值金额">
                        </div>
                    </div>
                    <div class="form-group" style="display: block">
                        <label class="col-xs-2 control-label">账户密码</label>
                        <div class="col-xs-8">
                            <input class="form-control" placeholder="请输入账户密码">
                        </div>
                    </div>
                    <div class="form-group" style="display: block">
                        <label class="col-xs-2 control-label"></label>
                        <div class="col-xs-8">
                            <a type="button" class="btn btn-danger" style="width: 120px; height: 34px; margin-right: 10px">下一步</a>
                        </div>
                    </div>
                </div>


            </div>

            <div style="display: none" id="draft" class="ibox-content m-draft">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">票据单号:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" placeholder="请输入票据单号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">请上传票据图片进行审核:</label>
                        <div class="col-sm-8">
                            <div class="m-inputicon">
                                <i class="fa fa-plus"></i>
                                <input type="file" style="display: none">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label"></label>
                        <div class="col-sm-8">
                            <a type="button" class="btn btn-danger" style="width: 120px; height: 34px; margin-right: 10px">下一步</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--页尾-->
    <span id="footer"></span>
  </body></html>
<script src="../common/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $.get('../common/html/head.html', function (data) {
        $('head').html(data)
    });

    $.get('../common/html/header.html', function (data) {
        $('#header').html(data)
    });

    $.get('../common/html/nav.html', function (data) {
        $('#nav').html(data)
    });

    $.get('../common/html/footer.html', function (data) {
        $('#footer').html(data)
    });
</script>
<script>
    // 显示公司网银支付
    $('.m-select-btn a').eq(0).click(function () {
        $('#bankList').show(300);
        $('#draft').hide(300);
        $(this).addClass('active').siblings().removeClass('active');
    });

    // 显示汇票支付
    $('.m-select-btn a').eq(1).click(function () {
        $('#bankList').hide(300);
        $('#draft').show(300);
        $(this).addClass('active').siblings().removeClass('active');
    });

    // 单选按钮切换
    $('.m-radio-con').on('click', 'input',function () {
        var $radio = $(this);

        $radio.on('change', function () {
            var flag = $radio.prop('checked');
            console.log(flag);
            if (flag) {
                $('input[type=radio]', '.m-radio-con').prev('.iconfont').removeClass('icon-danxuanhongse').addClass('icon-danxuanhuise');
                $radio.prev('.iconfont').removeClass('icon-danxuanhuise').addClass('icon-danxuanhongse');
            }
        })
    });

    $('.m-inputicon').on('click', function () {
        $('input', $(this)).click();
    })
</script>